<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>生成扩展图标</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
      background: #f5f5f5;
    }
    .container {
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    .icon-preview {
      display: flex;
      gap: 20px;
      margin: 30px 0;
      flex-wrap: wrap;
    }
    .icon-item {
      text-align: center;
    }
    .icon-item canvas {
      border: 1px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .icon-item label {
      display: block;
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
      font-weight: 500;
    }
    button {
      background: #667eea;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      margin: 5px;
      transition: background 0.3s;
    }
    button:hover {
      background: #5568d3;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .instructions {
      background: #e3f2fd;
      padding: 15px;
      border-radius: 6px;
      margin-top: 20px;
      line-height: 1.6;
    }
    .success-message {
      background: #c8e6c9;
      color: #2e7d32;
      padding: 12px;
      border-radius: 6px;
      margin-top: 15px;
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎨 扩展图标生成器</h1>
    <p>点击下方按钮生成不同尺寸的图标，然后下载并保存到 <code>icons</code> 文件夹中。</p>
    
    <div class="icon-preview" id="preview"></div>
    
    <div style="text-align: center;">
      <button onclick="generateAllIcons()" id="generate-btn">生成所有图标</button>
      <button onclick="downloadAll()" id="download-btn" disabled>下载所有图标</button>
    </div>

    <div class="success-message" id="success-msg">
      所有图标已生成！请将下载的文件移动到 <code>chrome-music-extension/icons/</code> 文件夹中。
    </div>

    <div class="instructions">
      <strong>📋 使用说明：</strong><br>
      1. 点击"生成所有图标"按钮预览图标<br>
      2. 点击"下载所有图标"按钮下载图标文件<br>
      3. 将下载的图标文件（icon16.png, icon48.png, icon128.png）移动到 <code>chrome-music-extension/icons/</code> 文件夹中<br>
      4. 如果 icons 文件夹不存在，请先创建它<br>
      5. 重新加载扩展程序即可
    </div>
  </div>

  <script src="logo-generator.js"></script>
  <script>
    const icons = {};
    
    function generateAllIcons() {
      const preview = document.getElementById('preview');
      preview.innerHTML = '';
      
      const sizes = [16, 48, 128];
      
      sizes.forEach(size => {
        const logoDataUrl = window.logoGenerator.generateLogo(size);
        icons[size] = logoDataUrl;
        
        const item = document.createElement('div');
        item.className = 'icon-item';
        
        const label = document.createElement('label');
        label.textContent = `${size}x${size}`;
        
        const canvas = document.createElement('canvas');
        canvas.width = size;
        canvas.height = size;
        canvas.style.width = size * 3 + 'px';
        canvas.style.height = size * 3 + 'px';
        canvas.style.imageRendering = 'auto';
        
        const img = new Image();
        img.onload = () => {
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, size, size);
        };
        img.src = logoDataUrl;
        
        item.appendChild(label);
        item.appendChild(canvas);
        preview.appendChild(item);
      });

      document.getElementById('download-btn').disabled = false;
    }
    
    function downloadAll() {
      if (Object.keys(icons).length === 0) {
        alert('请先点击"生成所有图标"按钮');
        return;
      }
      
      let downloadCount = 0;
      const total = Object.keys(icons).length;
      
      Object.keys(icons).forEach((size, index) => {
        setTimeout(() => {
          const link = document.createElement('a');
          link.download = `icon${size}.png`;
          link.href = icons[size];
          link.click();
          
          downloadCount++;
          if (downloadCount === total) {
            document.getElementById('success-msg').style.display = 'block';
          }
        }, index * 300);
      });
    }
    
    // 页面加载时自动生成
    window.addEventListener('load', () => {
      setTimeout(generateAllIcons, 100);
    });
  </script>
</body>
</html>
